<template>
  <div>
    <pannel-Title name="水表分项列表" class="mt10 app-list">
      <img slot="icon" src="@/assets/images/inspect/leakage-2.png" alt="" />
      <div slot="tips">
        <el-button type="primary" size="small" @click="handlerGolist">
          水表历史预警信息
        </el-button>
      </div>
      <el-row :gutter="20">
        <el-col :span="4" :xs="12">
          <totalCol :totalObj="totalwateralarmNum"></totalCol>
        </el-col>
        <el-col :span="4" :xs="12">
          <div class="exhibition">
            <h4>最新整体能耗</h4>
            <p class="yellow">累计水耗{{ datas.totalWater | waterLtoT }}</p>
            <p class="green">40口径 {{ datas.caliber40 }}</p>
            <p class="red">50口径 {{ datas.caliber50 }}</p>
          </div>
        </el-col>
        <el-col :span="16" :xs="24">
          <el-row :gutter="20" class="vll" v-if="datas.list.length > 0">
            <el-col v-for="(item, index) in datas.list" :key="index" :span="8">
              <div class="content">
                <div class="content-left">
                  <p>
                    {{ item.cardNum }}
                  </p>
                  <p>
                    {{ item.deviceCode }}
                  </p>
                  <el-button round @click="goEnergy(item)">
                    <div class="marquee-wrap">
                      <div
                        :class="
                          item.realLocal.length > 10
                            ? 'marquee-content-wrap'
                            : 'marquee-content'
                        "
                        :nextText="item.realLocal"
                      >
                        {{ item.realLocal }}
                      </div>
                    </div>
                  </el-button>
                </div>
                <div class="content-right">
                  <p>
                    {{ item.deviceTotalData | waterLtoT }}
                  </p>
                  <p>{{ item.caliber }}mm</p>
                  <div class="status-area">
                    电量：
                    <dict-tag
                      :options="dict.type.voltage_status"
                      :value="item.voltageStatus"
                    />
                  </div>
                </div>
              </div>
            </el-col>
          </el-row>
          <el-row v-else class="vll">
            <el-col :span="24" class="mid">
              <p>该终端下暂无水表</p>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </pannel-Title>
  </div>
</template>

<script>
import { dealElectricity } from "@/utils/index";
import totalCol from "@/views/maintenance/realtime/inspect/components/totalCol.vue";
export default {
  name: "inspectList",
  components: {
    totalCol,
  },
  props: {
    datas: {
      type: Object,
      default: {},
    },
    totalwateralarmNum: {
      type: Object,
      default: {},
    },
  },
  dicts: ["voltage_status"],
  data() {
    return {
      id: "",
    };
  },
  filters: {
    waterLtoT(value) {
      let result;
      if (value > 1000) {
        result = value / 1000 + "吨";
      } else {
        result = value + "升";
      }
      return result;
    },
  },
  methods: {
    // 跳转设备能耗数据抄表流水
    goEnergy(item) {
      let query = {
        tab: "1",
        deviceCode: item?.deviceCode ?? "",
      };
      this.$router.push({ path: "/statistics/behavior/extremum", query: query }).catch(() => {});
    },
    close(status) {
      this.show = false;
      if (status) this.getBudgetdata();
    },
    handlerGolist() {
      this.$router.push({
        name: "alarmList2",
        query: {
          type: "2",
        },
      });
    },
  },
};
</script>
<style scoped lang="scss">
@import "@/assets/styles/mixin.scss";
@keyframes move {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}
.app-list {
  height: 410px;
  .exhibition {
    max-width: 200px;
    margin: 0 auto;
    padding: 10px;
    text-align: center;
    background: #f3f9fe;
    h4 {
      font-size: 14px;
      margin: 10px 0;
    }
    p {
      font-size: 12px;
    }
    .yellow {
      color: #ff9e00;
    }
    .green {
      color: #00cd34;
    }
    .red {
      color: #f03838;
    }
  }
  .content {
    border: 1px dashed #cbccce;
    height: 130px;
    padding: 0 5px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    .content-left {
      flex: 1;
      text-align: center;
      overflow: hidden;
      p {
        font-size: 12px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .el-button {
        width: 100%;
        font-weight: bold;
        color: #3385ff;
        border: 1px solid #3385ff;
        overflow: hidden;
        .marquee-wrap {
          width: 160px;
          white-space: nowrap;
          overflow: hidden;
          .marquee-content {
            width: 100%;
          }
          .marquee-content-wrap {
            position: relative;
            width: fit-content;
            animation: move 7s linear infinite;
            padding-left: 20px;
            &::after {
              position: absolute;
              right: -100%;
              content: attr(nextText);
            }
          }
        }
      }
    }
    .content-right {
      width: 120px;
      height: 100%;
      border-radius: 5px;
      font-size: 14px;
      padding: 6px;
      // margin: 10px;
      background: #f3f9fe;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-around;
      .status-area {
        display: flex;
        align-items: center;
        ::v-deep .el-tag {
          margin: 0;
        }
      }
      p {
        padding: 0;
        margin: 0;
      }
    }
  }
  .vll {
    overflow: hidden;
    overflow-y: auto;
    height: 300px;
    @include scrollBar2;
    .mid {
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      p {
        font-size: 32px;
        color: #1890ff;
      }
    }
  }
}
.total-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  .totla-top {
    display: flex;
    align-items: baseline;
    justify-content: center;
    margin-bottom: 10px;
    div {
      &:nth-child(2) {
        margin-left: 5px;
      }
    }
  }
  .total-item {
    position: relative;
    width: 76px;
    height: 76px;
    margin-bottom: 10px;
    img {
      width: 76px;
      height: 76px;
    }
    .total-mid {
      position: absolute;
      z-index: 2;
      display: flex;
      flex-direction: column;
      align-items: center;
      div {
        &:nth-child(1) {
          font-size: 12px;
        }
        &:nth-child(2) {
          font-size: 10px;
        }
      }
    }
    .total-mid1 {
      top: 26px;
      left: 14px;
      div {
        &:nth-child(2) {
          color: #d7451c;
        }
      }
    }
    .total-mid2 {
      top: 26px;
      left: 24px;
      div {
        &:nth-child(2) {
          color: #0fab49;
        }
      }
    }
    .total-mid3 {
      top: 26px;
      left: 14px;
      div {
        &:nth-child(2) {
          color: #e18903;
        }
      }
    }
  }
}
</style>
